<template>
  <a-modal
    title="人员照片"
    :width="400"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="24">
        <a-col :sm="24" :md="24" :xl="12" style="width: 100%">
          <div align="center">
            <div
              class="ant-upload-preview"
              @click="$refs.modal.edit(person)"
              style="width: 260px;height: 320px;">
              <div class="mask">
                <a-icon type="plus" />
              </div>
              <img
                slot="cover"
                alt="图像"
                :src="person.personImage"
              />
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <template slot="footer">
      <upload-image ref="modal" @ok="setAvatar"/>
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
    </template>
  </a-modal>
</template>

<script>
  import UploadImage from './UploadImage'
  export default {
    components: {
      UploadImage
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
        person: {}
      }
    },
    methods: {
      upload (record) {
        this.visible = true
        this.person = record
      },
      handleCancel () {
        this.visible = false
      },
      setAvatar () {
        this.visible = false
      }
    }
  }
</script>

<style lang="less" scoped>

  .avatar-upload-wrapper {
    height: 100px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0,0,0,0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
</style>
